<template>
	<view class="bottom-nav">
		<view 
			class="nav-item" 
			:class="{ active: activeTab === 'home' }"
			@click="handleNavClick('home')"
		>
			<text class="nav-text">首页</text>
		</view>
		
		<view 
			class="nav-item" 
			:class="{ active: activeTab === 'friends' }"
			@click="handleNavClick('friends')"
		>
			<text class="nav-text">朋友</text>
		</view>
		
		<view class="nav-item upload-btn" @click="handleNavClick('upload')">
			<view class="upload-icon">
				<uni-icons type="plus" :size="48" color="#fff"></uni-icons>
			</view>
		</view>
		
		<view 
			class="nav-item" 
			:class="{ active: activeTab === 'messages' }"
			@click="handleNavClick('messages')"
		>
			<text class="nav-text">
				消息
				<view class="badge" v-if="unreadCount > 0">{{ unreadCount > 99 ? '99+' : unreadCount }}</view>
			</text>
		</view>
		
		<view 
			class="nav-item" 
			:class="{ active: activeTab === 'profile' }"
			@click="handleNavClick('profile')"
		>
			<text class="nav-text">我</text>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
	activeTab: {
		type: String,
		default: 'home'
	},
	unreadCount: {
		type: Number,
		default: 0
	}
})

const emit = defineEmits(['navChange'])

const handleNavClick = (tab) => {
	emit('navChange', tab)
}
</script>

<style scoped lang="scss">
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 100;
}

.nav-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	
	&.active {
		.nav-text {
			color: #fff;
			font-weight: 500;
			
			&::after {
				content: '';
				position: absolute;
				bottom: -20rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 40rpx;
				height: 4rpx;
				background: #fff;
				border-radius: 2rpx;
			}
		}
	}
}

.nav-text {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.6);
	position: relative;
}

.badge {
	position: absolute;
	top: -8rpx;
	right: -24rpx;
	min-width: 32rpx;
	height: 32rpx;
	line-height: 32rpx;
	padding: 0 8rpx;
	background: #ff2442;
	color: #fff;
	font-size: 20rpx;
	border-radius: 16rpx;
	text-align: center;
	box-sizing: border-box;
}

.upload-btn {
	flex: 0 0 auto;
	width: 100rpx;
	height: 100rpx;
}

.upload-icon {
	width: 80rpx;
	height: 80rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>

